<style scoped>
	#detail_ad {
	    position: relative;
	}
	#detail_ad>img{
		max-width: 100%;
		min-width: 100%;
	}
	#baseinfo,#addrinfo,#comment,#photos{
		display: none;
		margin-top:48px;

	}
	#addrinfo{
		height: 60%;
	}
	.nav{
		font-size: 12px;
		position: relative;
		height:inherit;
	}
	.nav1,.baseinfo{
		width:25%;
		position: absolute;
		left:0;
	}
	.nav2,.addrinfo{
		width:25%;
		position: absolute;
		left:25%;
	}
	.nav3,.comment{
		width:25%;
		position: absolute;
		left:50%;

	}
	.nav4,.photos{
		width:25%;
		position: absolute;
		left:75%;

	}
	.nav1,.nav2,.nav3,.nav4{
		margin-top:16px;
		z-index: 1;
		opacity: 0;
	}
	.nav1,.nav2,.nav3{
		border-right:1px solid darkgrey;
	}
	.nav1:checked~#baseinfo,.nav2:checked~#addrinfo,.nav3:checked~#comment,.nav4:checked~#photos{
		display: block;
	}
	.nav1~.baseinfo,.nav2~.addrinfo,.nav3~.comment,.nav4~.photos{
		color: #717171;
    font-size: 16px;
    background-color:#fff;
	}
	.nav2~.addrinfo:atfer{

	}
	nav3~.comment:atfer{

	}
	.nav4~.photos:atfer{

	}
	.nav1:checked~.baseinfo,.nav2:checked~.addrinfo,.nav3:checked~.comment,.nav4:checked~.photos{
		border-bottom:3px solid red;
	}
	.nav>div{
		text-align: center;
		display: inline-block;
		padding-top: 16px;
		padding-bottom: 16px;
	}
	.peaplescount,.bestFestival {
			width: 45%;
	    display: inline-block;
	    text-align: left;
	}
	.placecomment,.visitors {
			width: 55%;
	    display: inline-block;
	    text-align: left;
	}
	.bestFestival,.visitors{
		margin-top: 10px;
	}
	div#baseinfo {
	    width: 92%;
	    margin-left: 4%;
	    padding-bottom: 0;
	}
	.stars {
	    display: inline-block;
	    font-size: 12px; 
	}
	#desc .title {
	    text-align: left;
	    padding-left: 10px;
	    border-left: 3px solid red;
	    margin-bottom: 20px;
	    color: red;
	    font-weight: bold;
	}

	div#desc {
	    margin-top: 30px;
	}

	#desc .content {
	    text-align: left;
	    line-height: 2;
	    color: #717171;
	    font-weight: bold;
	}

	#desc .tips {
	    background: red;
	    color: #fff;
	    padding: 25px;
	    margin-top: 10px;
	    line-height: 2;
	}
	div#share {
    width: 92%;
    margin-left: 4%;
    text-align: justify;
    position: relative;
    padding-top: 20px;
    margin-top: 30px;
    border-top: 1px solid #E8E8E8;
    color:#878787;
	}
	#share .wechat {
	    display: inline-block;
	    margin-left: 20px;
	}

	#share .friend_circle {
	    display: inline-block;
	}
	#detail_ad .info {
	    position: absolute;
	    bottom: 0;
	    width: 92%;
	    left: 4%;
	    color: #ddd;
	}

	#detail_ad .title {
	    font-size: 20px;
	}

	#detail_ad .user {
	    display: inline-block;
	    vertical-align: middle;
	}

	#detail_ad .like {
	    display: inline-block;
	    vertical-align: middle;
	}

	#detail_ad .user .name {
	    display: inline-block;
	}
	#detail_ad .user .publishtime{
		font-size: 12px;
		margin-top:5px;
	}
	#comment{
		background: #f4f4f4;
	}
	form.submitComment {
	  position: fixed;
    width: 100%;
    bottom: 0;
    padding-top: 20px;
    padding-bottom: 20px;
    border-top: 1px solid #E6E6E6;
    background: #FFFFFF;
	}
	#submit {
	  color: #FDAA4F;
	  font-size: 24px;
	  width: 20%;
	  height: 44px;
    line-height: 44px;
    display: inline-block;
	}

	input#inputcontent {
		font-size: 1.5em;
	  width: 80%;
    height: 44px;
    border: 1px solid darkgrey;
    border-radius: .3em;
    padding-left: 10px;
    vertical-align: top;
	}
	input::placeholder{
		font-size:1em;
	}
	.likenumber{
		text-align: center;
	}
	.camppic {
	  width: 46%;
    line-height: 10em;
    margin-left: 2%;
    margin-right: 2%;
    height: 10em;
    display: inline-block;
    text-align: center;
    margin-top: .3em;
	}

	.camppic>img {
    max-width: 100%;
    max-height: 100%;
	}

	div#photos {
	  text-align: justify;
	  width: 90%;
	  margin-left: 5%;
	}
</style>
<style>
	body{
		background-color:#F4F4F4;
	}
</style>
<template>
	<div id="detail_ad">
		<img src="../resource/images/detail/detail_ad.png">
		<div class="info">
			<div class="title">{{campPlace.name}}</div>
			<div style="width:100%;text-align:justify">
				<div class="user">
					<img :src="campPlace.ownerInfo.headimgurl" height="40" width="40" alt="" style="border-radius:50%;vertical-align: middle;">
					<div style="display:inline-block;vertical-align: middle;padding-left:5px;">
						<div class="name">{{campPlace.ownerInfo.nickname}}</div>
						<div class="publishtime">
							<span class="glyphicon glyphicon-time" style="margin-right:5px;"></span><span>昨天</span><span>15:20</span>
						</div>		
					</div>
				</div>
				<div class="like">
					<img src="../resource/images/camp/like.png" alt="">
					<div class="likenumber">{{campPlace.likes.length}}</div>
				</div>
				<i style="width:100%;height:0;display:inline-block"></i>
			</div>
		</div>
	</div>
	<div class="nav">
		<input type="radio" name="nav" class="nav1" checked="checked">
		<div class="baseinfo">基本信息</div><!-- 
		 --><input type="radio" name="nav" class="nav2">
		<div class="addrinfo">地址</div><!-- 
		 --><input type="radio" name="nav" class="nav3">
		<div class="comment">点评</div><!-- 
		 --><input type="radio" name="nav" class="nav4">
		<div class="photos">照片</div>
		<div id="baseinfo">
			<div class="peaplescount">
				<img src="../resource/images/camp/peaplescount.png" height="16" width="16" alt="">
				<span>营地数量</span>
				<span>{{campPlace.campcount}}</span>
			</div><!-- 
			 --><div class="placecomment">
				<img src="../resource/images/detail/detail_placecomment.png" height="16" width="16" alt="">
				<span>营地评价</span>
				<div class="stars">
					<div class="start">
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star"></span>
					</div>
				</div>
			</div><!-- 
			 --><div class="bestFestival">
				<img src="../resource/images/camp/bestFestival.png" height="16" width="16" alt="">
				<span>最佳季节</span>
				<span>{{campPlace.bestseason}}</span>
			</div><!-- 
			 --><div class="visitors">
				<img src="../resource/images/detail/detail_visitor.png" height="16" width="16" alt="">
				<span>浏览量</span>
				<span>{{campPlace.visitors}}</span>
				<span>次</span> 
			</div>
			<div id="desc">
						<div class="title">简介</div>
						<div class="content">{{campPlace.desc}}</div>
						<div class="tips">{{campPlace.attention}}</div>
					</div>
			<div id="share">
				<div style="display:inline-block;">分享至:</div>
				<div class="wechat"><img src="../resource/images/detail/detail_wechat.png" height="42" width="52" style="margin-right:8px;"><span>微信好友</span></div>
				<div class="friend_circle"><img src="../resource/images/detail/detail_frient_circle.png" height="50" width="51" style="margin-right:8px;"><span>朋友圈</span></div>
				<i style="display:inline-block;width:100%;height:0;"></i>
			</div>
		</div>
		<div id="addrinfo"><mymap></mymap></div>
		<div id="comment">
		<div style="margin-bottom:88px;">
			<commentlist></commentlist>
		</div>
		<form name="comment" class="submitComment">
			<div style="width:92%;margin-left:4%;">
				<input v-model="content" type="text" id="inputcontent" placeholder="发表评论"><!-- 
				 --><div @click="sendComment" id="submit">提交</div>
			</div>
		</form>
		</div>
		<div id="photos">
			<template v-for="picPath in campPlace.picPaths">
			<div class="camppic">
				<img :src="picPath" alt="">
			</div>
			</template>
			<i style="width:100%;height:0;display:inline-block;"></i>
		</div>
	</div>
</template>
<script type="text/javascript">
	var wxinfo = JSON.parse(window.localStorage.getItem("user"));
	// var wxinfo = {
 //    "openid" : "ospoZwrbG-NsWdMdWu7su143MNSY",
 //    "nickname" : "Kevin💓",
 //    "language" : "zh_CN",
 //    "city" : "Guangzhou",
 //    "province" : "Guangdong",
 //    "country" : "China",
 //    "headimgurl" : "http://wx.qlogo.cn/mmopen/WvFVl7XN9iaTb4A8kico3yqnFHeYVibbCdqJpDRDfjn7DKx0UOeaSVib5Eicuia3VmLQcmws9GTp7UoFAM1aibfpfgGLibmuwibTgtZP6/0",
 //    "subscribe" : 1,
 //    "sex" : true,
	// };
	var commentlist = require("../component/commentlist.vue");
	var storage = window.localStorage;
	var campPlaces =JSON.parse(storage.getItem("campPlaces"));
	var mymap = require('../component/map.vue');
	module.exports = {
		data:function(){
			return {
				url:"/camp/comment/setInfo",
				campPlace:{
					likes:[],
					ownerInfo:{},
					picPaths:[],
					visitors:0
				},
				content:""
			}
		},
		methods:{
			sendComment:function(){
				var info = {};
				var vue = this;
				info.content = this.content;
				info.ownerId = wxinfo.openid;
				info.campId = this.campPlace._id;
				vue.$http.post(vue.url,info).then(function(res){
					vue.content = "";
					alert("点评成功")
				},function(err){
					console.log(err);
				});
			}
		},
		ready:function(){
			var jssdk = require('../utils/jssdk.js');
			jssdk(this);
			var index = this.$route.params.index;
			this.campPlace = campPlaces[index];
			this.$broadcast("child-campPlace",this.campPlace);
		},
		components:{
		"commentlist":commentlist,
		"mymap":mymap
		}
	}
</script>